<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="project" label="project"  />
    <el-table-column prop="title" label="title"  />
    <el-table-column prop="method" label="method" />
    <el-table-column prop="url" label="url" />
    <!-- <el-table-column prop="requestBody" label="requestBody" width="600" />
    <el-table-column prop="responseBody" label="responseBody" width="120" /> -->
    <el-table-column prop="insertTime" label="insertTime" />
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default>
        <el-button type="text" size="small" @click="dialogFormVisible = true"
          >Detail</el-button>
        <el-button type="text" size="small">Edit</el-button>
        <!-- <div class="el-dialog-class"> -->
          <el-dialog v-model="dialogFormVisible" title="Interface detail" draggable destroy-on-close=true :modal="false">
            <el-form :model="form">
              <el-form-item label="URL" :label-width="formLabelWidth">
                <el-input v-model="form.URL" type="url" readonly autocomplete="off" />
              </el-form-item>
              <el-form-item label="requestBody" :label-width="formLabelWidth">
                <el-input v-model="form.requestBody" type="textarea" autosize readonly autocomplete="off" />
              </el-form-item>
              <el-form-item label="responseBody" :label-width="formLabelWidth">
                <el-input v-model="form.responseBody" type="textarea" autosize readonly autocomplete="off" />
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogFormVisible = false"
                  >Confirm</el-button
                >
              </span>
            </template>
          </el-dialog>
        <!-- </div> -->
      </template>
    </el-table-column>
  </el-table>
</template>

<script >
import axios from 'axios'
import { ref } from 'vue'

export default{
  data(){
  return {
    tableData: [],
    dialogFormVisible : ref(false),
    formLabelWidth: '140px',
    form : {
              URL: 'res.data.URL',
              requestBody: 'this.tableData[1]',
              responseBody: ''
          }
  }
},

created(){
    axios.get("/interface/get/all").then((res)=>{
      console.log(res)
      this.tableData = [...res.data]
    }).catch((err)=>{
      console.log(err)
    })
  },
  // methods(){
  //     handleClick = () => {
  //     console.log('click')
  //   }
  // }
}
</script>

<style>
/* .el-dialog-class{ */
  /* background-color: rgb(0 0 0 / 0%) !important; */
/* } */
</style>